/**
 * 图片标签图元
 * @class
 * @extends graphic.div.BaseDiv
 */
import BaseDiv from "./BaseDiv.js";

class ImageLabel extends BaseDiv {
  /**
   * 构造函数
   * @param {Object} options 配置参数
   * @param {Array.<Number>} [options.position=[111, 28, 0]] 经纬度[x,y,z]
   * @param {String} [options.imageUrl] 图片路径
   * @param {Object} [options.style] 样式信息
   * @param {Number} [options.style.width] 宽度像素
   * @param {Number} [options.style.height] 高度像素
   * @param {Cesium.DistanceDisplayCondition} [options.style.distanceDisplayCondition={near: 0.1, far: 10000}] 可视范围
   * @param {Boolean} [options.style.pointerEvents=true] DIV是否可以鼠标交互,为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件
   * @param {Boolean} [options.style.userSelect=false] 是否可以选中文本
   */
  constructor(options = {}) {
    super(options);

    // 初始化图片路径
    this._imageUrl = options.imageUrl || "";

    // 更新DOM元素显示图片
    this._updateLabelStyle();
  }

  /**
   * 获取或设置图片路径
   * @type {String}
   */
  get imageUrl() {
    return this._imageUrl;
  }

  set imageUrl(url) {
    if (this._imageUrl !== url) {
      this._imageUrl = url;
      this._updateLabelStyle();
    }
  }

  /**
   * 设置图元坐标
   * @param {Array} position 坐标值，[x,y,z]
   */
  setPosition(position) {
    super.setPosition(position);
  }

  /**
   * 设置图元坐标串
   * @param {Array.<Array>} positions 坐标串，[[x,y,z],[x,y,z],...]
   */
  setPositions(positions) {
    super.setPositions(positions);
  }

  /**
   * 更新标签样式
   * @private
   */
  _updateLabelStyle() {
    if (!this._domEle) return;

    // 清空现有内容
    this._domEle.innerHTML = "";

    // 如果有图片路径，创建并添加img元素
    if (this._imageUrl) {
      const img = document.createElement("img");
      img.src = this._imageUrl;
      img.style.maxWidth = "100%";
      img.style.maxHeight = "100%";
      img.style.display = "block";

      // 应用pointerEvents和userSelect样式
      img.style.pointerEvents =
        this._style.pointerEvents === false ? "none" : "auto";
      img.style.userSelect = this._style.userSelect ? "text" : "none";

      this._domEle.appendChild(img);
    }

    // 应用容器样式
    this._updateDomStyle();
  }

  /**
   * 创建DOM元素
   * @private
   * @returns {HTMLElement}
   */
  _createDomElement() {
    const div = super._createDomElement();

    // 添加特定的CSS类
    div.classList.add("cesium-extensions-image-label");

    return div;
  }

  /**
   * 更新DOM样式
   * @private
   * @param {HTMLElement} [element=this._domEle] 要更新样式的元素
   */
  _updateDomStyle(element = this._domEle) {
    if (!element) return;

    // 先调用父类方法应用基础样式
    super._updateDomStyle(element);

    // 确保容器样式适合图片显示
    element.style.display = "block";
    element.style.position = "absolute";
    element.style.overflow = "hidden";

    // 应用图片标签特定样式
    if (this._style.width) {
      element.style.width =
        typeof this._style.width === "number"
          ? `${this._style.width}px`
          : this._style.width;
    }

    if (this._style.height) {
      element.style.height =
        typeof this._style.height === "number"
          ? `${this._style.height}px`
          : this._style.height;
    }
  }
}

export default ImageLabel;
